<template>
  <div class="toliet">
      <div class="head">
          <div class="head_left">
              <span>九龙坡</span>
          </div>
      </div>
      <div class="page_top">
        <div class="left_sheet1">
            <div class="sheet1">
                <div id="male_toilet" :style="{width: '322px', height: '272px'}" ></div>
            </div>
            <div class="sheet1_info">
                <div class="kla" v-for="(item,index) in man" :key="item+index">
                    <p >{{item[0]}}：{{item[1]}}</p>
                    <span>{{item[2]}}</span> 
                </div>
            </div>
        </div>
        <div class="top_right">
            <div class="right_toi">
                <div class="top_rightL">
                    <div class="maleNumber">
                        <span>1</span>
                        <span>/3</span>
                        <p>男厕使用量</p>
                        <img src="../../assets/img/toilet_useing.png" alt="" style="width:60px;height:10px;transform: rotate(-90deg);margin-top: 35px;margin-left: -14px;">
                    </div>
                    <div class="male_bigPit">
                        <i class="iconfont  icon-dunce" :class="maleBigUseing1?'active_toilet':'deactive_toilet'"></i>
                        <i class="iconfont  icon-dunce" :class="maleBigUseing2?'active_toilet':'deactive_toilet'"></i>
                        <i class="iconfont  icon-dunce" :class="maleBigUseing3?'active_toilet':'deactive_toilet'"></i>
                    </div>
                    <div class="male_smallPit" >
                        <i class="iconfont  icon-xiaobianchi" :class="maleSmallUseing1?'active_toilet':'deactive_toilet'"></i>
                        <i class="iconfont  icon-xiaobianchi" :class="maleSmallUseing2?'active_toilet':'deactive_toilet'"></i>
                        <i class="iconfont  icon-xiaobianchi" :class="maleSmallUseing3?'active_toilet':'deactive_toilet'"></i>
                    </div>
                </div>
                <div class="top_rightR">
                    <div class="femaleNumber">
                        <span>1</span>
                        <span>/3</span>
                        <p>女厕使用量</p>
                        <img src="../../assets/img/toilet_useing.png" alt="" style="width:80px;height:10px">
                    </div>
                    <div class="female_bigPit">
                        <i class="iconfont  icon-dunce" :class="femaleBigUseing1?'active_toilet':'deactive_toilet'"></i>
                        <i class="iconfont  icon-dunce" :class="femaleBigUseing2?'active_toilet':'deactive_toilet'"></i>
                        <i class="iconfont  icon-dunce" :class="femaleBigUseing3?'active_toilet':'deactive_toilet'"></i>
                    </div>
                </div>
            </div>
            <div class="todayCount">
                <div class="count_left">
                    <span>今日客流量</span>
                    <div class="numb">
                        <p v-for="(item,index) in total" :key="item+index" :style="item?'color:#08fe80':'color:white'">{{item}}</p>
                    </div>
                </div>
                <div class="count_right">
                    <div class="malecount">
                        <i class="iconfont  icon-nan"></i>
                        <p>正在使用人数</p>
                        <p>{{useingPerson}}</p>
                    </div>
                    <!-- <div class="femalecount">
                        <i class="iconfont  icon-nv"></i>
                        <p>女厕使用人数</p>
                        <p>{{visitors.woman}}</p>
                    </div> -->
                </div>
            </div>
        </div>
      </div>
      <div class="page_center">
        <div class="left_sheet2">
            <div class="sheet2">
                <div id="female_toilet" :style="{width: '322px', height: '272px'}" ></div>
            </div>
            <div class="sheet2_info">
                <div class="kla" v-for="(item,index) in woman" :key="item+index">
                    <p >{{item[0]}}：{{item[1]}}</p>
                    <span>{{item[2]}}</span> 
                </div>
            </div>
        </div>
        <div class="right_sheet1">
            <div class="sheet1_top">
                <p>年用水量：{{water.year}}</p>
                <p>月用水量：{{water.month}}</p>
                <p>日用水量：{{water.day}}</p>
            </div>
            <div class="rightSheet1">
                <div id="waterQuantity" :style="{width: '100%', height: '100%'}" ></div>
            </div>
        </div>
        <div class="right_sheet2">
            <div class="sheet2_top">
                <p>年用电量：{{electric.year}}</p>
                <p>月用电量：{{electric.month}}</p>
                <p>日用电量：{{electric.day}}</p>
            </div>
            <div class="rightSheet2" style="padding-left:10px">
                <div id="electricQuantity" :style="{width: '100%', height: '100%'}" ></div>
            </div>
        </div>
      </div>
      <div class="bottom">
          <Marquee :sendVal='newItems'></Marquee>
      </div>
  </div>
</template>

<script>
import Marquee from '../../components/marquee'
import axios from '../../utils/axios'
const api = 'http://192.168.0.199:5000'
export default {
    components:{
        Marquee
    },
    data() {
        return {
            maleBigUseing1:true,
            maleBigUseing2:false,
            maleBigUseing3:false,
            maleSmallUseing1:false,
            maleSmallUseing2:false,
            maleSmallUseing3:false,
            femaleBigUseing1:false,
            femaleBigUseing2:true,
            femaleBigUseing3:false,
            total:[],
            electric:{},
            man:{},
            visitors:{},
            water:{},
            weather:{},
            woman:{},
            woman_data:{},
            man_data:{},
            newItems:[
                {detail: '温馨提醒：细微之处见公德,举手之间显文明'},
                {detail: '温馨提醒：来时洗、去时关、节约身边的水资源'},
                {detail: '温馨提醒：滴水在指尖,节水在心田'},
                {detail: '温馨提醒：随手冲一冲,干净又轻松'},
            ],
            useingPerson:0
        }
    },
    mounted(){
        this.getToiletData()
        this.getNumberOfPerson()
        this.longPolling()
        this.longPollingNumber()
    },
    methods:{
        getToiletData(){
            let url = `${api}/data`
            axios.get(url).then(res=>{
                this.electric = res.electric
                this.man = Object.values(res.man).reverse()
                this.water = res.water
                this.woman = Object.values(res.woman).reverse()
                this.woman_data = res.woman_data.man_data
                this.man_data = res.man_data
                this.initEcharts()
            })
        },
        longPolling(){
            window.clearInterval(this.toiletData)
            this.toiletData = setInterval(()=>{
                if(this.$store.state.doesOpen){
                    setTimeout(() => {
                        this.getToiletData()
                    });
                }else{
                    window.clearInterval(this.toiletData)
                }
            },3000)
        },
        getNumberOfPerson(){
            let url = `${api}/visitors`
            axios.get(url).then(res=>{
                this.visitors = res
                this.useingPerson = this.visitors[0].in_have_count
                let aa = String(this.visitors[0].sum_out_count).split('')
                while(aa.length<4){
                    aa.unshift('0')
                }
                this.total = []
                aa.map(item=>{
                    this.total.push(Number(item))
                })
            })
        },
        longPollingNumber(){
            window.clearInterval(this.numberData)
            this.numberData = setInterval(()=>{
                if(this.$store.state.doesOpen){
                    setTimeout(() => {
                        this.getNumberOfPerson()
                    });
                }else{
                    window.clearInterval(this.numberData)
                }
            },3000)
        },
        initEcharts(){
            let female_toilet = this.$echarts.init(document.getElementById('female_toilet'))
            // 绘制图表
            female_toilet.setOption({
				tooltip: {
                    trigger: 'axis'
                },
                color:"#00effe",
                legend: {
                },
                textStyle: {
                    color:'#00effe', // 工艺等文字颜色
                    fontSize:'18'
                },
                radar: [
                    {
                        // indicator: [
                        //     {text: '外观', max: 100},
                        //     {text: '拍照', max: 100},
                        //     {text: '系统', max: 100},
                        //     {text: '性能', max: 100},
                        //     {text: '性能', max: 100},
                        //     {text: '屏幕', max: 100}
                        // ],
                        indicator:this.woman_data.key,
                        radius: 80,
                        splitLine: {
                            lineStyle: {
                                color: '#00effe' //圆线
                            }
                        }
                    }
                ],
                series: [
                    {
                        type: 'radar',
                        tooltip: {
                            trigger: 'item'
                        },
                        areaStyle: {},
                        data: [
                            {
                                value: this.woman_data.value
                            }
                        ]
                    },
                ]
            });

            let male_toilet = this.$echarts.init(document.getElementById('male_toilet'))
            // 绘制图表
            male_toilet.setOption({
				tooltip: {
                    trigger: 'axis'
                },
                color:"#00effe",
                legend: {
                },
                textStyle: {
                    color:'#00effe', // 工艺等文字颜色
                    fontSize:'18'
                },
                radar: [
                    {
                        indicator: this.man_data.key,
                        radius: 80,
                        splitLine: {
                            lineStyle: {
                                color: '#00effe' //圆线
                            }
                        }
                    }
                ],
                series: [
                    {
                        type: 'radar',
                        tooltip: {
                            trigger: 'item'
                        },
                        areaStyle: {},
                        data: [
                            {
                                value: this.man_data.value
                            }
                        ]
                    },
                ]
            });

            let waterQuantity = this.$echarts.init(document.getElementById('waterQuantity'))
            // 绘制图表
            waterQuantity.setOption({
				tooltip: {
                    trigger: 'axis'
                },
                textStyle: {
                    color:'#00f0ff'
                },
                //x轴信息样式
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一','周二','周三','周四','周五','周六','周日'],
                    //坐标轴颜色
                    axisLine:{
                        lineStyle:{
                            color:'#b9ecf5'
                        },
                        axisLabel:{
                            interval:0,//横轴信息全部显示
                            rotate:0,//-30度角倾斜显示
                            fontSize:'14'
                        }
                    },
                    
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter:'{value}L',
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#b9ecf5'
                        }
                    }
                },
                grid: {
                    left: 45
                },
                series: [
                    {
                        name:'用水量',
                        type:'line',
                        stack: '总量',
                        symbolSize:8,
                        color:['#00f0ff'],
                        smooth:false,   //关键点，为true是不支持虚线的，实线就用true
                        itemStyle:{
                            normal:{
                                lineStyle:{
                                    width:2,
                                    type:'solid'  //'dotted'虚线 'solid'实线
                                }
                            }
                        },
                        data:[150, 232, 201, 154, 190, 0, 0]
                    }
                ]
            });

            let electricQuantity = this.$echarts.init(document.getElementById('electricQuantity'))
            // 绘制图表
            electricQuantity.setOption({
				tooltip: {
                    trigger: 'axis'
                },
                textStyle: {
                    color:'#00f0ff'
                },
                //x轴信息样式
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一','周二','周三','周四','周五','周六','周日'],
                    //坐标轴颜色
                    axisLine:{
                        lineStyle:{
                            color:'#b9ecf5'
                        },
                    },
                    axisLabel:{
                        interval:0,//横轴信息全部显示
                        rotate:0,//-30度角倾斜显示
                        fontSize:'10'
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter:'{value}KW'
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#b9ecf5'
                        }
                    }
                },
                grid: {
                    left: 50
                },
                series: [
                    {
                        name:'用水量',
                        type:'line',
                        stack: '总量',
                        symbolSize:8,
                        color:['#00f0ff'],
                        smooth:false,   //关键点，为true是不支持虚线的，实线就用true
                        itemStyle:{
                            normal:{
                                lineStyle:{
                                    width:2,
                                    type:'solid'  //'dotted'虚线 'solid'实线
                                }
                            }
                        },
                        data:[38, 46, 57, 49, 51, 0, 0]
                    }
                ]
            });
        }
    }
}
</script>

<style lang="less">
.toliet{
    @keyframes myfirst
    {
        0%   {opacity: 1;}
        25%  {opacity: .8;}
        50%  {opacity: .7;}
        100% {opacity: 1;}
    }
    height: 75vh;
    width: 100%;
    background: url(../../assets/img/bg_toilet8.png) no-repeat;
    background-size: 100% 100%;
    .head{
        width: 100%;
        height: 8%;
        display: flex;
        justify-content: space-between;
        .head_left{
            color: #c4f7ff;
            margin: 5px 0 0 20px;
            font-size: 22px;
            span{
                padding-right:10px;
                display: inline-block;
                img{
                    height: 100%;
                }
            }
            span:nth-of-type(4){
                padding-left: 10px;
            }
        }
    }
    .page_top{
        width: 100%;
        height: 42%;
        display: flex;
        justify-content: space-between;
        .left_sheet1{
            width: 37.3%;
            height: 96%;
            margin: 0 1.5% 0 2%;
            display: flex;
            justify-content: space-between;
            .sheet1{
                margin-top: 7%;
            }
            .sheet1_info{
                width: 34%;
                height: 80%;
                color: #00f0ff;
                font-size: 16px;
                margin-top: 3%;
                padding-right: 2vw;
                .kla{
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
        .top_right{
            width: 57.4%;
            height: 100%;
            margin-right: 1.8%;
            .right_toi{
                width: 100%;
                height: 60%;
                display: flex;
            }
            .top_rightL{
                width: 34%;
                height: 100%;
                margin-top: 1.5%;
                position: relative;
                .maleNumber{
                    color: white;
                    font-weight: bolder;
                    position: absolute;
                    left: 4%;
                    display: flex;
                    span{
                        animation: myfirst 3s infinite;
                    }
                    span:nth-of-type(1){
                        font-size: 45px;
                    }
                    span:nth-of-type(2){
                        font-size: 32px;
                        line-height: 52px;
                    }
                    p{
                        color: white;
                        font-size: 12px;
                        margin: 10px 0 0 0;
                        font-weight: 500;
                        letter-spacing: 1px;
                        writing-mode: vertical-rl;
                        margin-left: 15px;
                    }
                }
                .male_bigPit{
                    i{
                        font-size: 74px;
                        position: absolute;
                        bottom: 0;
                    }
                    i:nth-of-type(2){
                        left: 25%;
                    }
                    i:nth-of-type(3){
                        left: 53%;
                    }
                }
                .male_smallPit{
                    i{
                        font-size: 44px;
                        position: absolute;
                        top: -7%;
                    }
                    i:nth-of-type(1){
                        left: 46%;
                    }
                    i:nth-of-type(2){
                        left: 60%;
                    }
                    i:nth-of-type(3){
                        left: 74%;
                    }
                }
            }
            .top_rightR{
                width: 32.6%;
                height: 100%;
                margin-top: 1.5%;
                margin-left: 34%;
                position: relative;
                .femaleNumber{
                    color: white;
                    font-weight: bolder;
                    position: absolute;
                    right: 45%;
                    top: 9%;
                    span{
                        animation: myfirst 3s infinite;
                    }
                    span:nth-of-type(1){
                        font-size: 45px;
                    }
                    span:nth-of-type(2){
                        font-size: 30px;
                    }
                    p{
                        color: white;
                        font-size: 14px;
                        margin: 0;
                        font-weight: 500;
                        letter-spacing: 1px;
                    }
                }
                .female_bigPit{
                    i{
                        font-size: 52px;
                        position: absolute;
                        right: 0;
                    }
                    i:nth-of-type(1){
                        top: -7%;
                        transform: rotate(270deg);
                    }
                    i:nth-of-type(2){
                        top: 25%;
                        transform: rotate(270deg);
                    }
                    i:nth-of-type(3){
                        top: 57%;
                        transform: rotate(270deg);
                    }
                }
            }
            .todayCount{
                width: 100%;
                height: 40%;
                overflow: hidden;
                display: flex;
                justify-content: space-between;
                .count_left{
                    width: 63%;
                    height: 65%;
                    margin-top: 4%;
                    display: flex;
                    justify-content: space-between;
                    span{
                        width: 48%;
                        color: white;
                        font-size: 2.5vw;
                        color: #c4f7ff;
                        font-family: system-ui;
                        font-weight: bolder;
                        letter-spacing: 0.8vw;
                        display: inline-block;
                        margin-top: 2%;
                    }
                    .numb{
                        width: 50%;
                        display: flex;
                        justify-content: space-between;
                    }
                    p{
                        display: inline-block;
                        margin: 0;
                        width: 20%;
                        text-align: center;
                        background: #8394ab;
                        line-height: 64px;
                        font-size: 4vw;
                        border-radius: 11px;
                        height: 93%;
                        // transition: all 0.5s ease-in-out;    
                        // transform: translateY(-40px);
                        animation: myfirst 3s infinite;
                    }
                }
                .count_right{
                    width: 33%;
                    height: 90%;
                    margin-top: 1%;
                    display: flex;
                    justify-content: space-between;
                    color: white;
                    margin-right: 0.4vw;
                    .malecount{
                        width: 45%;
                        text-align: center;
                        margin: 0 auto;
                        i{
                            font-size: 32px;
                            display: block;
                        }
                        p{
                            margin: 0;
                            font-size: 12px;
                        }
                        p:nth-of-type(2){
                            font-size: 20px;
                            color:white;
                            font-weight: bolder;
                        }
                    }
                }
            }
        }
    }
    .page_center{
        width: 100%;
        height: 41%;
        display: flex;
        justify-content: space-between;
        .left_sheet2{
            width: 37.3%;
            height: 96%;
            margin: 0 1.5% 0 2%;
            display: flex;
            justify-content: space-between;
            .sheet2{
                margin-top: 7%;
            }
            .sheet2_info{
                width: 34%;
                height: 80%;
                color: #00f0ff;
                font-size: 16px;
                margin-top: 3%;
                padding-right: 2vw;
                .kla{
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
        .right_sheet1, .right_sheet2{
            width: 27.8%;
            margin-right: 1.8%;
            .sheet1_top, .sheet2_top{
                color: #00f0ff;
                height: 30%;
                margin-left: 50%;
                font-size: 16px;
                margin-top: 1.8vh;
                p{
                    margin: 0
                }
            }
            .rightSheet1, .rightSheet2{
                height: 82%;
                margin-top: -36px;
            }
        }
    }
    .active_toilet{
        color: #eb0b1f;
    }
    .deactive_toilet{
        color: #00d262;
    }
    .bottom{
        color: white;
        font-size: 1.26vw;
        line-height: 5.16vh;
        text-align: center;
        margin-top: 12px;
    }
}
</style>